<template>
  <lb-layout
    v-loading="$store.getters.loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="#a19f9fb0;"
    :paddBottom="5"
  >
    <div class="flex">
      <el-button size="small" @click="goBack"> 返回 </el-button>
      <el-descriptions style="margin-left: 20px">
        <el-descriptions-item :label="info.areaName">
          {{ info.year }} 年预算统计</el-descriptions-item
        >
        <el-descriptions-item label="合计部门"
          >{{ info.organizationCounts }} 家</el-descriptions-item
        >
        <el-descriptions-item label="合计费用">
          {{ info.budgetFund }} 元</el-descriptions-item
        >
      </el-descriptions>
    </div>
    <el-row>
      <el-col :span="24">
        <el-form
          ref="queryForm"
          :inline="true"
          :model="form"
          label-width="auto"
        >
          <el-form-item label="地区:" prop="areaId">
            <CascaderSelect
              v-model="form.areaId"
              :values="form.areaId"
              requestMethod="get"
              varient="areaDept"
              :propOptions="areaProps"
              size="small"
              placeholder="请选择地区"
            ></CascaderSelect>
          </el-form-item>
          <el-form-item label="年份:" prop="">
            <el-date-picker
              v-model="form.year"
              type="year"
              placeholder="请选择年份"
              size="small"
              :value-format="'yyyy'"
              :picker-options="pickeroOptions"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="small"
              @click="getInfo"
            >
              搜索
            </el-button>
            <el-button icon="el-icon-refresh" size="small" @click="resetQuery">
              重置
            </el-button>
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="small"
              @click="handleExport"
            >
              导出
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-table
      ref="excelTable"
      :data="list"
      height="700"
      style="width: 100%"
      class="mt20"
    >
      <el-table-column
        prop="deptName"
        label="申报单位"
        minWidth="150"
        align="center"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="budgetFund"
        label="总预算（元）"
        minWidth="150"
        align="center"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="usedFee"
        label="总已用（元）"
        minWidth="150"
        align="center"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="remainingCost"
        label="总剩余（元）"
        minWidth="150"
        align="center"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        v-for="n in 12"
        :key="n"
        prop="idx"
        :label="n + '月'"
        width="200"
        align="center"
      >
        <el-table-column
          :prop="'a' + (n - 1)"
          label="已用（元）"
          minWidth="150"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span
              :class="Number(scope.row['a' + (n - 1)]) > 0 ? 'red' : 'green'"
              >{{ scope.row["a" + (n - 1)] }}</span
            >
          </template>
        </el-table-column>
        <el-table-column
          :prop="'b' + (n - 1)"
          label="剩余（元）"
          minWidth="150"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span
              :class="Number(scope.row['b' + (n - 1)]) > 0 ? 'red' : 'green'"
              >{{ scope.row["b" + (n - 1)] }}</span
            >
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
  </lb-layout>
</template>

      <script>
import { exportExcel } from "@/utils/xlsx";
import { detail } from "@/api/statistics/budgetUse.js";
import { subtr } from "@/utils/index";
import CascaderSelect from "@/components/Select/CascaderSelect";
export default {
  name: "budgetUseDetail",
  components: {
    CascaderSelect,
  },
  data() {
    return {
      form: {
        areaId: "",
        year: "",
      },
      areaProps: {
        value: "id",
        children: "children",
        label: "label",
        checkStrictly: true,
        expandTrigger: "hover",
      },
      pickeroOptions: {
        disabledDate(time) {
          let date = new Date();
          return time.getFullYear() > date.getFullYear();
        },
      },
      list: [],
    };
  },
  mounted() {
    // this.areaId = this.$route.query.areaId;
    // this.year = this.$route.query.year;
    this.getFormreset();
    this.getInfo();
  },
  methods: {
    handleExport() {
      if (this.list.length <= 0) {
        this.$message.warning("无内容导出,请确认!");
        return false;
      }
      let fileName = this.form.year + "年预算使用统计";
      let cols = [{ wpx: 240 }];
      exportExcel(this.$refs.excelTable, fileName, cols);
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.form = {
        areaId: "",
        year: "",
      };
      this.resetForm("queryForm");
      this.getFormreset();
      this.getInfo();
    },
    getFormreset() {
      this.form.areaId = "";
      let now = new Date().getFullYear();
      this.form.year = String(now);
    },
    getInfo() {
      console.log(this.form);
      const that = this;
      const data = {
        areaId: this.form.areaId[this.form.areaId.length - 1],
        year: this.form.year,
      };
      that.$store.commit("app/updateApiCount", "add");
      detail(data)
        .then((res) => {
          that.$store.commit("app/updateApiCount");
          if (res.code === 700) {
            that.$message.warning(res.msg);
            return false;
          }
          that.list =
            res.data && res.data.length > 0
              ? res.data.map((row) => {
                  row.remainingCost = subtr(row.budgetFund, row.usedFee);
                  row.item.map((it, i) => {
                    row["a" + i] = it.usedFee;
                    row["b" + i] = it.remainingCost;
                    return it;
                  });
                  return row;
                })
              : [];
        })
        .catch((err) => {
          that.$store.commit("app/updateApiCount");
          // this.$message.error("系统错误,请联系管理员!300042");
        });
    },
    goBack() {
      this.$router.go(-1);
    },
  },
};
</script>

    <style lang="scss" scoped>
.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
::v-deep
  .el-descriptions--medium:not(.is-bordered)
  .el-descriptions-item__cell {
  padding-bottom: 0 !important;
}
.red {
  color: #ed5565;
}
.green {
  color: #10b767;
}
</style>
